WPF এর Animation এবং Storyboard Techniques

WPF (Windows Presentation Foundation) এ Animation এবং Storyboard হলো এমন শক্তিশালী টুলস যা ইউজার ইন্টারফেসে ডাইনামিক এবং ইন্টারঅ্যাকটিভ উপাদান তৈরি করতে সাহায্য করে। WPF অ্যাপ্লিকেশনগুলিতে অ্যানিমেশন সিস্টেম ব্যবহার করে আপনি ইউজার ইন্টারফেসের উপাদানগুলির আচরণে পরিবর্তন আনতে পারেন, যেমন একটি বাটনের আকার পরিবর্তন, কোনো কন্ট্রোলের মুভমেন্ট, অথবা একাধিক উপাদানের সিঙ্ক্রোনাইজড অ্যানিমেশন।

WPF এ Animation এর পরিচিতি

Animation হল WPF এর একটি গুরুত্বপূর্ণ ফিচার যা UI উপাদানগুলোর ভিজ্যুয়াল প্রপার্টি যেমন পজিশন, আকার, রঙ, স্কেল, এবং অন্যান্য পরিবর্তন করতে ব্যবহৃত হয়। WPF এর অ্যানিমেশন সিস্টেমের মাধ্যমে আপনি সহজেই অ্যানিমেটেড ট্রানজিশন এবং ইফেক্ট তৈরি করতে পারেন।

WPF অ্যানিমেশন এর প্রধান ধরনের (Types of Animations in WPF)

1. DoubleAnimation:
   এটি কোনো ডাবল ভ্যালুর জন্য অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়, যেমন Width, Height, Opacity, Margin ইত্যাদি।
2. ColorAnimation:
   এটি রঙের পরিবর্তন (যেমন ব্যাকগ্রাউন্ড কালার বা টেক্সট কালার) অ্যানিমেট করতে ব্যবহৃত হয়।
3. PointAnimation:
   এটি পয়েন্টের অবস্থান পরিবর্তন (যেমন, Canvas.Left, Canvas.Top) অ্যানিমেট করতে ব্যবহৃত হয়।
4. RotateTransform Animation:
   এটি কোনো উপাদানকে ঘুরানোর জন্য ব্যবহৃত হয়। এর মাধ্যমে রোটেশন অ্যানিমেশন তৈরি করা যায়।
5. ScaleTransform Animation:
   এটি কোনো উপাদানকে স্কেল (যেমন বড় বা ছোট করা) করার জন্য ব্যবহৃত হয়।
6. TranslateTransform Animation:
   এটি কোনো উপাদানকে স্থানান্তর (মুভ) করার জন্য ব্যবহৃত হয়।

Storyboard এর পরিচিতি

Storyboard হলো WPF অ্যানিমেশনগুলির একটি কন্টেইনার যা একাধিক অ্যানিমেশনকে একসাথে সিঙ্ক্রোনাইজ করে। Storyboard এর মাধ্যমে আপনি একাধিক অ্যানিমেশন একযোগভাবে চালাতে পারেন এবং সেগুলোর টেমপ্লেট বা টাইমলাইন নিয়ন্ত্রণ করতে পারেন।

Storyboard সাধারণত XAML ফাইলে ডিফাইন করা হয়, এবং আপনি এই স্টোরিবোর্ডে একাধিক Animation টাইপ যোগ করতে পারেন। Storyboard দিয়ে আপনি অ্যানিমেশনগুলোর সময়, গতি, এবং অবস্থা নিয়ন্ত্রণ করতে পারেন।

WPF এ Animation এবং Storyboard উদাহরণ

এখানে একটি সাধারণ উদাহরণ দেওয়া হলো, যেখানে Storyboard ব্যবহার করে একটি Button এর আকার (size) এবং অবস্থান (position) অ্যানিমেট করা হয়েছে।

উদাহরণ 1: Basic Animation with Storyboard

MainWindow.xaml:

<Window x:Class="WPFApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Animation Example" Height="350" Width="525">
    <Grid>
        <!-- Button that will be animated -->
        <Button Name="myButton" Content="Click Me" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click">
            <Button.RenderTransform>
                <TranslateTransform x:Name="buttonTransform" />
            </Button.RenderTransform>
        </Button>

        <!-- Storyboard for Animation -->
        <Window.Resources>
            <Storyboard x:Key="ButtonAnimation">
                <DoubleAnimation 
                    Storyboard.TargetName="myButton" 
                    Storyboard.TargetProperty="Width" 
                    From="100" To="200" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
                <DoubleAnimation 
                    Storyboard.TargetName="buttonTransform" 
                    Storyboard.TargetProperty="X" 
                    From="0" To="200" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
        </Window.Resources>
    </Grid>
</Window>

MainWindow.xaml.cs:

using System.Windows;

namespace WPFApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // Start the animation when the button is clicked
            Storyboard sb = (Storyboard)this.Resources["ButtonAnimation"];
            sb.Begin();
        }
    }
}

এখানে, Storyboard-এ দুটি অ্যানিমেশন যোগ করা হয়েছে:

1. Width পরিবর্তন করতে একটি DoubleAnimation যা বাটনের আকার বড় করবে এবং ছোট করবে।
2. X Position পরিবর্তন করতে আরেকটি DoubleAnimation যা বাটনটিকে বাম থেকে ডানে সরাবে।

• AutoReverse="True": এই সেটিংটি অ্যানিমেশনটি উল্টা করে চালাবে, অর্থাৎ বাটনটি প্রথমে বড় হবে, তারপর ছোট হবে।
• RepeatBehavior="Forever": এই সেটিংটি অ্যানিমেশনটি চিরকাল পুনরাবৃত্তি করতে বলে।

WPF অ্যানিমেশন এবং Storyboard এর টাইমলাইন নিয়ন্ত্রণ

WPF অ্যানিমেশন এবং Storyboard এর মাধ্যমে আপনি টাইমলাইন নিয়ন্ত্রণ করতে পারেন। এতে অ্যানিমেশনগুলোর শুরু সময়, স্থায়ীত্ব এবং গতি নিয়ন্ত্রণ করা যায়।

উদাহরণ 2: Timeline Control with KeyFrames

MainWindow.xaml:

<Window x:Class="WPFApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Animation with KeyFrames" Height="350" Width="525">
    <Grid>
        <!-- Button to Animate -->
        <Button Name="myButton" Content="Hover Over Me" Width="100" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" MouseEnter="Button_MouseEnter">
            <Button.RenderTransform>
                <TranslateTransform x:Name="buttonTransform" />
            </Button.RenderTransform>
        </Button>

        <!-- Storyboard with KeyFrames -->
        <Window.Resources>
            <Storyboard x:Key="MoveButtonAnimation">
                <DoubleAnimationUsingKeyFrames 
                    Storyboard.TargetName="buttonTransform" 
                    Storyboard.TargetProperty="X">
                    <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                    <LinearDoubleKeyFrame KeyTime="0:0:1" Value="300"/>
                    <LinearDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Window.Resources>
    </Grid>
</Window>

MainWindow.xaml.cs:

using System.Windows;

namespace WPFApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_MouseEnter(object sender, RoutedEventArgs e)
        {
            // Start the animation when the mouse hovers over the button
            Storyboard sb = (Storyboard)this.Resources["MoveButtonAnimation"];
            sb.Begin();
        }
    }
}

এই উদাহরণে, DoubleAnimationUsingKeyFrames ব্যবহার করা হয়েছে, যা টাইমলাইনের বিভিন্ন পয়েন্টে X পজিশন পরিবর্তন করে। এটি একটি LinearDoubleKeyFrame তৈরি করে যেখানে বিভিন্ন KeyTime নির্ধারণ করা হয়েছে (যেমন 0, 1 এবং 2 সেকেন্ডে)। এই অ্যানিমেশনটি একটি MouseEnter ইভেন্টের মাধ্যমে শুরু হয়, যখন ব্যবহারকারী বাটনের উপর মাউস নিয়ে আসবে।

WPF অ্যানিমেশন এর অন্যান্য বৈশিষ্ট্য

• Easing Functions: WPF অ্যানিমেশনের মধ্যে বিভিন্ন ধরনের easing functions ব্যবহার করা যায়, যেমন BounceEase, ElasticEase, QuadraticEase, ইত্যাদি, যা অ্যানিমেশনকে আরও প্রাকৃতিক এবং মসৃণ করে তোলে।

  উদাহরণ:

  <BounceEase Bounces="3" EasingMode="EaseInOut" />
  

• KeyFrames: WPF অ্যানিমেশনে KeyFrames ব্যবহার করে আপনি সময়ের নির্দিষ্ট পয়েন্টে মান পরিবর্তন করতে পারেন।
• RepeatBehavior: অ্যানিমেশনটির পুনরাবৃত্তির সংখ্যা বা সময় নির্ধারণ করতে RepeatBehavior ব্যবহার করতে পারেন।
• AutoReverse: অ্যানিমেশনটি স্বয়ংক্রিয়ভাবে উল্টে চলে এমন আচরণ নির্ধারণ করতে AutoReverse ব্যবহার করা হয়।

সারাংশ (Summary)

• Animation এবং Storyboard WPF অ্যাপ্লিকেশনের ভিজ্যুয়াল ইফেক

্ট তৈরি করতে ব্যবহৃত হয়। Storyboard একাধিক অ্যানিমেশন একসাথে চালাতে সাহায্য করে, এবং KeyFrames এর মাধ্যমে নির্দিষ্ট সময় অনুযায়ী পরিবর্তন আনা যায়।

• Easing Functions এবং RepeatBehavior এর মাধ্যমে অ্যানিমেশনের গতি এবং আচরণ নিয়ন্ত্রণ করা সম্ভব।
• এই ফিচারগুলি WPF অ্যাপ্লিকেশনগুলিতে ইন্টারঅ্যাকটিভ এবং সৃজনশীল ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে।

WPF (Windows Presentation Foundation) এ Animation এবং Storyboard ব্যবহার করে আপনি UI উপাদানগুলিতে ডাইনামিক ইফেক্ট এবং ট্রান্সফর্মেশন তৈরি করতে পারেন। এগুলি আপনাকে আপনার অ্যাপ্লিকেশনের UI তে আকর্ষণীয় এবং ইন্টারেকটিভ অ্যানিমেশন যোগ করার সুযোগ দেয়। এই ধারণাগুলি WPF অ্যাপ্লিকেশনগুলিতে কাস্টম অ্যানিমেশন এবং ট্রান্সফর্মেশন তৈরির জন্য অত্যন্ত গুরুত্বপূর্ণ।

Animation (অ্যানিমেশন)

Animation হল একটি প্রক্রিয়া যা UI উপাদানের অবস্থান, আকার, রঙ, অথবা অন্য কোনো বৈশিষ্ট্য পরিবর্তন করতে ব্যবহৃত হয়, যা সময়ের সাথে সাথে পরিবর্তিত হয়। অ্যানিমেশনগুলি আপনাকে গ্রাফিক্যাল ইন্টারফেসে সজীবতা যোগ করার সুযোগ দেয় এবং এটি ইউজারদের জন্য ইন্টারেকটিভ ও মনোমুগ্ধকর অভিজ্ঞতা তৈরি করতে সাহায্য করে।

WPF এ, অ্যানিমেশন সাধারণত KeyFrames ব্যবহার করে করা হয়। KeyFrames হল নির্দিষ্ট মান, যা একটি অ্যানিমেশনের মধ্যে অন্তর্বর্তী সময়ের মাধ্যমে কন্ট্রোল করতে সাহায্য করে।

Animation এর ধরণ (Types of Animation in WPF)

1. DoubleAnimation:
   এটি একটি সংখ্যা বা স্লাইডারের মান পরিবর্তন করতে ব্যবহৃত হয়।
2. ColorAnimation:
   এটি UI উপাদানের রঙ পরিবর্তন করতে ব্যবহৃত হয়।
3. PointAnimation:
   এটি পয়েন্টের অবস্থান পরিবর্তন করতে ব্যবহৃত হয় (যেমন, একটি উপাদানকে একটি স্থান থেকে অন্য স্থানে সরানো)।
4. ThicknessAnimation:
   এটি UI উপাদানের সীমানার প্রস্থ বা উচ্চতা পরিবর্তন করতে ব্যবহৃত হয়।
5. DoubleAnimationUsingKeyFrames:
   এটি একটি একাধিক মানের মধ্যে পরিবর্তন করতে ব্যবহৃত হয়, যেখানে আপনি বিভিন্ন সময়ে নির্দিষ্ট মান সেট করতে পারেন।

Animation উদাহরণ (Example of Animation)

নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি বাটনের আকার পরিবর্তন করা হচ্ছে DoubleAnimation ব্যবহার করে:

<Button Content="Click Me" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click">
    <Button.RenderTransform>
        <ScaleTransform x:Name="scaleTransform"/>
    </Button.RenderTransform>
</Button>

C# কোডে অ্যানিমেশন যোগ করা:

private void Button_Click(object sender, RoutedEventArgs e)
{
    DoubleAnimation scaleAnimation = new DoubleAnimation
    {
        From = 1,
        To = 2,
        Duration = TimeSpan.FromSeconds(1)
    };

    scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, scaleAnimation);
    scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimation);
}

এখানে, বাটনের ক্লিক করার মাধ্যমে বাটনের আকার দ্বিগুণ হয়ে যাবে।

Storyboard (স্টোরিবোর্ড)

Storyboard হলো একটি বিশেষ ধরনের ক্লাস যা একাধিক অ্যানিমেশন এবং তাদের কার্যাবলী সংবদ্ধভাবে সংগঠিত করে। এটি একাধিক অ্যানিমেশনকে একত্রে নিয়ন্ত্রণ করার জন্য ব্যবহৃত হয়। Storyboard এ আপনি একাধিক Timeline সংরক্ষণ করতে পারেন, এবং এটি একটি নির্দিষ্ট সময়ের মধ্যে একাধিক অ্যানিমেশন পরিচালনা করতে সক্ষম।

Storyboard একটি নির্দিষ্ট Timeline এ বিভিন্ন অ্যানিমেশন একত্রে প্রয়োগ করে, যা একাধিক প্রপার্টি এবং উপাদানের জন্য একত্রে সমন্বিত অ্যানিমেশন তৈরি করতে সাহায্য করে।

Storyboard এর গঠন (Structure of Storyboard)

<Window x:Class="WPFApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Storyboard Example" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="myStoryboard">
            <DoubleAnimation
                Storyboard.TargetName="myButton"
                Storyboard.TargetProperty="Width"
                From="100" To="300" Duration="0:0:2"/>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Button Name="myButton" Content="Click Me" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click"/>
    </Grid>
</Window>

C# কোডে Storyboard শুরু করা:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard myStoryboard = (Storyboard)FindResource("myStoryboard");
    myStoryboard.Begin();
}

এখানে, একটি Storyboard তৈরি করা হয়েছে যা বাটনের প্রস্থ পরিবর্তন করবে। বাটনে ক্লিক করার সাথে সাথে এটি স্টোরিবোর্ডটি শুরু করবে এবং বাটনের প্রস্থ ধীরে ধীরে 100 থেকে 300 এ পরিবর্তিত হবে।

Animation এবং Storyboard এর মধ্যে পার্থক্য

Animation এবং Storyboard একত্রে ব্যবহার

আপনি Animation এবং Storyboard একসাথে ব্যবহার করে আরও জটিল এবং ডাইনামিক অ্যানিমেশন তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি একটি Storyboard ব্যবহার করতে পারেন যা একাধিক অ্যানিমেশন চালাবে, যেমন একটি বাটনের আকার পরিবর্তন, রঙ পরিবর্তন, এবং অবস্থান পরিবর্তন একই সময়ের মধ্যে।

উদাহরণ:

<Window x:Class="WPFApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Storyboard and Animation Example" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="MyStoryboard">
            <!-- Scale Animation -->
            <DoubleAnimation 
                Storyboard.TargetName="myButton" 
                Storyboard.TargetProperty="Width" 
                From="100" To="300" Duration="0:0:2"/>
            <DoubleAnimation 
                Storyboard.TargetName="myButton" 
                Storyboard.TargetProperty="Height" 
                From="50" To="100" Duration="0:0:2"/>
            <ColorAnimation 
                Storyboard.TargetName="myButton" 
                Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
                From="LightBlue" To="Red" Duration="0:0:2"/>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Button Name="myButton" Content="Click Me" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click"/>
    </Grid>
</Window>

C# কোড:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard myStoryboard = (Storyboard)FindResource("MyStoryboard");
    myStoryboard.Begin();
}

এখানে, বাটনটির আকার (প্রস্থ এবং উচ্চতা) এবং ব্যাকগ্রাউন্ড রঙ একই সময়ে পরিবর্তিত হবে।

সারাংশ (Summary)

• Animation: UI উপাদানগুলোর একক বৈশিষ্ট্য পরিবর্তন করতে ব্যবহৃত হয় (যেমন আকার, রঙ, অবস্থান)।
• Storyboard: একাধিক অ্যানিমেশন একত্রে এবং টাইমলাইনে পরিচালনা করার জন্য ব্যবহৃত হয়।

এই দুটি একত্রে ব্যবহৃত হলে, আপনি WPF অ্যাপ্লিকেশনে জটিল এবং ইন্টারেকটিভ অ্যানিমেশন তৈরি করতে সক্ষম হবেন।

WPF (Windows Presentation Foundation) এ DoubleAnimation, ColorAnimation, এবং ObjectAnimation এর মাধ্যমে আপনি বিভিন্ন UI উপাদানের প্রপার্টি অ্যানিমেট করতে পারেন। এই অ্যানিমেশনগুলো UI উপাদানগুলির ভিজ্যুয়াল পরিবর্তন এবং ইন্টারঅ্যাকটিভ ইফেক্ট তৈরি করতে সাহায্য করে। WPF অ্যানিমেশনগুলি মূলত Storyboard এর সাথে কাজ করে, যা একাধিক অ্যানিমেশন একসাথে পরিচালনা করতে ব্যবহৃত হয়।

1. DoubleAnimation

DoubleAnimation ব্যবহার করে আপনি double টাইপের প্রপার্টি অ্যানিমেট করতে পারেন। এটি বিভিন্ন UI প্রপার্টির মান পরিবর্তন করতে ব্যবহৃত হয় যেমন Width, Height, Opacity, Canvas.Left, Canvas.Top ইত্যাদি।

উদাহরণ: DoubleAnimation

<Button Content="Click Me" Width="100" Height="50" Click="Button_Click">
    <Button.RenderTransform>
        <TranslateTransform x:Name="btnTransform"/>
    </Button.RenderTransform>
</Button>

C# কোড:

private void Button_Click(object sender, RoutedEventArgs e)
{
    // DoubleAnimation
    DoubleAnimation animation = new DoubleAnimation();
    animation.From = 0;
    animation.To = 200;
    animation.Duration = new Duration(TimeSpan.FromSeconds(1));

    // Animate the TranslateTransform X property (Horizontal movement)
    btnTransform.BeginAnimation(TranslateTransform.XProperty, animation);
}

এখানে, DoubleAnimation ব্যবহার করে বাটনের X প্রপার্টি 0 থেকে 200 পিক্সেল পর্যন্ত 1 সেকেন্ডের মধ্যে পরিবর্তিত হবে। এর ফলে বাটনটি অনুভূমিকভাবে সরবে।

2. ColorAnimation

ColorAnimation ব্যবহার করে আপনি UI উপাদানের Color প্রপার্টি পরিবর্তন করতে পারেন, যেমন Background, Foreground, BorderBrush, ইত্যাদি। এটি আপনার UI উপাদানের রঙ পরিবর্তন করতে ব্যবহৃত হয়।

উদাহরণ: ColorAnimation

<Button Content="Click Me" Width="100" Height="50" Click="Button_Click">
    <Button.Background>
        <SolidColorBrush x:Name="buttonBrush" Color="LightBlue"/>
    </Button.Background>
</Button>

C# কোড:

private void Button_Click(object sender, RoutedEventArgs e)
{
    // ColorAnimation
    ColorAnimation colorAnimation = new ColorAnimation();
    colorAnimation.From = Colors.LightBlue;
    colorAnimation.To = Colors.Green;
    colorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));

    // Animate the Background color of the button
    buttonBrush.BeginAnimation(SolidColorBrush.ColorProperty, colorAnimation);
}

এখানে, ColorAnimation ব্যবহার করে বাটনের ব্যাকগ্রাউন্ড রঙ 1 সেকেন্ডের মধ্যে LightBlue থেকে Green এ পরিবর্তিত হবে।

3. ObjectAnimationUsingKeyFrames

ObjectAnimationUsingKeyFrames ব্যবহৃত হয় যখন আপনি একাধিক অবজেক্টের মান পরিবর্তন করতে চান বা একই টাইপের একাধিক মান পর্যায়ক্রমে পরিবর্তন করতে চান। এটি সাধারণত KeyFrames এর মাধ্যমে কাজ করে, যা একাধিক স্টেপে মান পরিবর্তন করার সুযোগ দেয়।

উদাহরণ: ObjectAnimationUsingKeyFrames

<Button Content="Animate Color" Width="100" Height="50" Click="Button_Click">
    <Button.Background>
        <SolidColorBrush x:Name="buttonBrush" Color="LightBlue"/>
    </Button.Background>
</Button>

C# কোড:

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Create ObjectAnimationUsingKeyFrames
    ObjectAnimationUsingKeyFrames animation = new ObjectAnimationUsingKeyFrames();
    animation.Duration = new Duration(TimeSpan.FromSeconds(3));

    // Create ColorKeyFrames
    ColorKeyFrame keyFrame1 = new DiscreteColorKeyFrame(Colors.LightBlue, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)));
    ColorKeyFrame keyFrame2 = new DiscreteColorKeyFrame(Colors.Green, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1)));
    ColorKeyFrame keyFrame3 = new DiscreteColorKeyFrame(Colors.Red, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2)));

    // Add keyframes to the animation
    animation.KeyFrames.Add(keyFrame1);
    animation.KeyFrames.Add(keyFrame2);
    animation.KeyFrames.Add(keyFrame3);

    // Apply animation to the Background color of the button
    buttonBrush.BeginAnimation(SolidColorBrush.ColorProperty, animation);
}

এখানে, ObjectAnimationUsingKeyFrames ব্যবহার করে বাটনের ব্যাকগ্রাউন্ড রঙ 3 সেকেন্ডের মধ্যে তিনটি ধাপে পরিবর্তিত হবে: LightBlue, Green, এবং Red।

Storyboard এর মাধ্যমে Multiple Animations

যখন আপনি একাধিক অ্যানিমেশন একসাথে চালাতে চান, তখন আপনি Storyboard ব্যবহার করে সেগুলিকে একত্রে পরিচালনা করতে পারেন। Storyboard হল একটি কন্টেইনার যা একাধিক অ্যানিমেশনকে সিঙ্ক্রোনাইজডভাবে চালানোর সুযোগ দেয়।

উদাহরণ: Storyboard with Multiple Animations

<Button Content="Animate All" Width="100" Height="50" Click="Button_Click">
    <Button.RenderTransform>
        <TranslateTransform x:Name="btnTransform"/>
    </Button.RenderTransform>
    <Button.Background>
        <SolidColorBrush x:Name="buttonBrush" Color="LightBlue"/>
    </Button.Background>
</Button>

C# কোড:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard storyboard = new Storyboard();

    // DoubleAnimation (Move the button horizontally)
    DoubleAnimation moveAnimation = new DoubleAnimation();
    moveAnimation.From = 0;
    moveAnimation.To = 200;
    moveAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
    Storyboard.SetTarget(moveAnimation, btnTransform);
    Storyboard.SetTargetProperty(moveAnimation, new PropertyPath(TranslateTransform.XProperty));

    // ColorAnimation (Change background color)
    ColorAnimation colorAnimation = new ColorAnimation();
    colorAnimation.From = Colors.LightBlue;
    colorAnimation.To = Colors.Green;
    colorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
    Storyboard.SetTarget(colorAnimation, buttonBrush);
    Storyboard.SetTargetProperty(colorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));

    // Add animations to storyboard
    storyboard.Children.Add(moveAnimation);
    storyboard.Children.Add(colorAnimation);

    // Begin the storyboard (start animations)
    storyboard.Begin();
}

এখানে, Storyboard ব্যবহার করে দুটি অ্যানিমেশন একসাথে চালানো হয়েছে: একটি DoubleAnimation যা বাটনকে অনুভূমিকভাবে সরায়, এবং একটি ColorAnimation যা বাটনের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করে।

সারাংশ (Summary)

• DoubleAnimation: double টাইপের প্রপার্টির মান পরিবর্তন করতে ব্যবহৃত হয় (যেমন Width, Height, Opacity ইত্যাদি)।
• ColorAnimation: UI উপাদানের Color প্রপার্টি (যেমন Background, Foreground) পরিবর্তন করতে ব্যবহৃত হয়।
• ObjectAnimationUsingKeyFrames: বিভিন্ন অবজেক্টের প্রপার্টি (যেমন Point, Brush) অ্যানিমেট করতে ব্যবহৃত হয়, যেখানে একাধিক মান পর্যায়ক্রমে পরিবর্তিত হয়।
• Storyboard: একাধিক অ্যানিমেশন একসাথে সিঙ্ক্রোনাইজডভাবে চালানোর জন্য ব্যবহৃত হয়।

এই অ্যানিমেশনগুলো WPF অ্যাপ্লিকেশনে ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউআই তৈরি করতে সাহায্য করে, যা ইউজার ইন্টারফেসকে আরও আকর্ষণীয় ও ইন্টারঅ্যাকটিভ করে তোলে।

WPF (Windows Presentation Foundation) এ Animation বা অ্যানিমেশন একটি অত্যন্ত শক্তিশালী বৈশিষ্ট্য, যা UI উপাদানগুলির মধ্যে বিভিন্ন পরিবর্তন (যেমন আকার, স্থান, রঙ) করতে পারে। WPF এ দুটি প্রধান ধরনের অ্যানিমেশন ব্যবহৃত হয়: KeyFrame Animation এবং Complex Animation Sequence।

নিচে এই দুটি অ্যানিমেশনের ব্যবহার এবং তাদের স্ট্রাকচার ব্যাখ্যা করা হয়েছে।

১. KeyFrame Animation (কীফ্রেম অ্যানিমেশন)

KeyFrame Animation হল একটি টাইমলাইন ভিত্তিক অ্যানিমেশন, যেখানে অ্যানিমেশনের নির্দিষ্ট পয়েন্টে (কীফ্রেমে) মান পরিবর্তিত হয়। এটি একটি নির্দিষ্ট সময়ের মধ্যে বিভিন্ন পরিমাণ পরিবর্তন করার জন্য ব্যবহৃত হয়।

KeyFrame Animation এর বৈশিষ্ট্য (Properties of KeyFrame Animation)

• KeyFrames: অ্যানিমেশনের নির্দিষ্ট সময়ে (যেমন 0%, 50%, 100%) মানের পরিবর্তন করার জন্য কীফ্রেম ব্যবহৃত হয়।
• Animation Types: সাধারণত DoubleAnimation, ColorAnimation, PointAnimation ইত্যাদি ব্যবহার করা হয়।
• Ease Functions: অ্যানিমেশনকে আরও মসৃণ করার জন্য Ease-in, Ease-out বা Ease-in-out ফাংশন ব্যবহার করা যেতে পারে।

KeyFrame Animation উদাহরণ (Example of KeyFrame Animation):

নিচে একটি বেসিক KeyFrame Animation এর উদাহরণ দেওয়া হলো, যেখানে একটি বাটন ব্যবহার করে তার অবস্থান পরিবর্তন করা হয়েছে।

<Window x:Class="WPFApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="KeyFrame Animation Example" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="ButtonAnimation">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
                <KeyFrame KeyTime="0:0:0" Value="0" />
                <KeyFrame KeyTime="0:0:1" Value="200" />
                <KeyFrame KeyTime="0:0:2" Value="0" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Button x:Name="myButton" Content="Click Me" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click">
            <Button.RenderTransform>
                <TranslateTransform x:Name="buttonTransform"/>
            </Button.RenderTransform>
        </Button>
    </Grid>
</Window>

C# কোড (Code-behind):

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard storyboard = (Storyboard)this.Resources["ButtonAnimation"];
    storyboard.Begin();
}

এখানে, বাটনটি ক্লিক করলে তার অবস্থান একাধিক কীফ্রেম ব্যবহার করে পরিবর্তিত হবে। প্রথমে বাটনটি তার প্রাথমিক অবস্থানে থাকবে (0), তারপর এক সেকেন্ডে 200 পিক্সেল ডান দিকে চলে যাবে, এবং পরবর্তীতে আবার তার প্রাথমিক অবস্থানে ফিরে আসবে।

২. Complex Animation Sequence (কমপ্লেক্স অ্যানিমেশন সিকোয়েন্স)

Complex Animation Sequence হল একাধিক অ্যানিমেশন একসাথে বা পর্যায়ক্রমে চলা। এতে একাধিক অ্যানিমেশন একাধিক UI উপাদানকে একযোগভাবে বা আলাদা আলাদা সময়পর্বে অ্যানিমেটেড করে। আপনি একটি স্টোরিবোর্ড (Storyboard) ব্যবহার করে একাধিক অ্যানিমেশনকে সংগঠিত এবং নিয়ন্ত্রণ করতে পারেন।

Complex Animation Sequence এর বৈশিষ্ট্য (Properties of Complex Animation Sequence)

• Multiple Animations: একাধিক অ্যানিমেশন একটি স্টোরিবোর্ডের মধ্যে একসাথে বা পর্যায়ক্রমে চালানো যেতে পারে।
• KeyFrames এবং Timelines: স্টোরিবোর্ডের মধ্যে টাইমলাইন এবং কীফ্রেম ব্যবহারের মাধ্যমে একাধিক পরিবর্তন সমন্বিত করা যায়।
• BeginTime এবং Duration: একটি অ্যানিমেশনের শুরু এবং সম্পূর্ণ সময় নিয়ন্ত্রণ করা যায়।

Complex Animation Sequence উদাহরণ (Example of Complex Animation Sequence):

নিচে একটি Complex Animation Sequence উদাহরণ দেওয়া হলো যেখানে একাধিক কন্ট্রোলের জন্য একাধিক অ্যানিমেশন সম্পাদিত হয়।

<Window x:Class="WPFApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Complex Animation Sequence Example" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="ComplexAnimationSequence">
            <!-- Rotate Animation -->
            <DoubleAnimation Storyboard.TargetName="myButton"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                             From="0" To="360" Duration="0:0:2" RepeatBehavior="Forever"/>
            <!-- Move Animation -->
            <DoubleAnimation Storyboard.TargetName="myButton"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
                             From="0" To="200" Duration="0:0:2"/>
            <!-- Change Color Animation -->
            <ColorAnimation Storyboard.TargetName="myButton"
                            Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                            From="Red" To="Green" Duration="0:0:2"/>
        </Storyboard>
    </Window.Resources>

    <Grid>
        <Button x:Name="myButton" Content="Click Me" Width="100" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Click="Button_Click">
            <Button.RenderTransform>
                <TransformGroup>
                    <TranslateTransform x:Name="buttonMoveTransform"/>
                    <RotateTransform x:Name="buttonRotateTransform"/>
                </TransformGroup>
            </Button.RenderTransform>
            <Button.Background>
                <SolidColorBrush Color="Red"/>
            </Button.Background>
        </Button>
    </Grid>
</Window>

C# কোড (Code-behind):

private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard storyboard = (Storyboard)this.Resources["ComplexAnimationSequence"];
    storyboard.Begin();
}

এখানে, myButton বাটনের জন্য তিনটি আলাদা অ্যানিমেশন তৈরি করা হয়েছে:

1. Rotate: বাটনটি 360 ডিগ্রি ঘুরবে।
2. Move: বাটনটি horizontal অক্ষরে 200 পিক্সেল চলে যাবে।
3. Change Color: বাটনের ব্যাকগ্রাউন্ড কালার রেড থেকে গ্রিনে পরিবর্তিত হবে।

এই তিনটি অ্যানিমেশন একসাথে চলবে এবং বাটনের অবস্থান, রঙ, এবং ঘূর্ণন পরিবর্তিত হবে।

সারাংশ (Summary)

• KeyFrame Animation হল একটি টাইমলাইন-ভিত্তিক অ্যানিমেশন, যেখানে নির্দিষ্ট সময়ে কন্ট্রোলের বিভিন্ন প্রপার্টি পরিবর্তিত হয়। এটি UI উপাদানগুলির মধ্যে নির্দিষ্ট কাস্টম পরিবর্তন আনার জন্য ব্যবহৃত হয়।
• Complex Animation Sequence হল একাধিক অ্যানিমেশন একসাথে বা পর্যায়ক্রমে চলার পদ্ধতি, যা একাধিক UI উপাদান এবং প্রপার্টির জন্য প্রয়োগ করা যেতে পারে। এটি জটিল অ্যানিমেশন কনফিগারেশনের জন্য ব্যবহৃত হয়, যেখানে একাধিক পরিবর্তন একযোগে ঘটানো হয়।

WPF এ এই দুই ধরনের অ্যানিমেশন ব্যবহার করে আপনি সৃজনশীল এবং আকর্ষণীয় UI তৈরি করতে পারবেন।

Easing Functions এবং Animation Control Techniques হল WPF (Windows Presentation Foundation) অ্যাপ্লিকেশনগুলিতে অ্যানিমেশন এবং ভিজ্যুয়াল ট্রানজিশন তৈরি করার জন্য ব্যবহৃত শক্তিশালী বৈশিষ্ট্য। এরা UI তে প্রাকৃতিক এবং গতিশীল অ্যানিমেশন তৈরি করতে সহায়তা করে, যা অ্যাপ্লিকেশনটির ইউজার এক্সপেরিয়েন্স (UX) অনেক বেশি উন্নত করে।

Easing Function

Easing Function হল একটি বিশেষ ধরনের ফাংশন যা অ্যানিমেশন চলাকালীন সময়ে গতি নিয়ন্ত্রণ করে। এটি অ্যানিমেশনটির গতি শুরুতে, মাঝখানে এবং শেষে কিভাবে পরিবর্তিত হবে তা নির্ধারণ করে। সাধারণত, Easing Functions-এর সাহায্যে আপনি অ্যানিমেশনগুলোকে আরও প্রাকৃতিক এবং ইন্টারেক্টিভ বানাতে পারেন। এর মাধ্যমে আপনি অ্যানিমেশনের গতি বাড়ানো বা কমানো, স্লো বা ফাস্ট মুভমেন্ট তৈরি করতে পারেন, যা অ্যাপ্লিকেশনটির ইন্টারঅ্যাকশনকে আরও কার্যকরী এবং মনোরম করে তোলে।

Easing Function এর ধরন (Types of Easing Functions)

1. LinearEase:
   এই easing function টি সরল গতিতে অ্যানিমেশন সম্পাদন করে। এর মধ্যে কোন দ্রুতগতির পরিবর্তন থাকে না, অর্থাৎ অ্যানিমেশনটি একই গতিতে চলে।
2. QuadraticEase:
   এটি অ্যানিমেশন শুরু বা শেষের দিকে দ্রুতগতির পরিবর্তন দেয়। সাধারনত এটি সোজা উপরে বা নিচে চলতে থাকে, এবং মধ্যবর্তী সময়ে ধীরে ধীরে তীব্রতা বৃদ্ধি পায়।
3. CubicEase:
   এই easing function খুবই মসৃণ এবং প্রাকৃতিক গতির পরিবর্তন তৈরি করে। এটি একটি সোজা রেখার মতো নয়, বরং মাঝখানে কিছুটা পরিবর্তন করে, যেমন শুরুতে ধীরে, পরে দ্রুত এবং শেষে আবার ধীরে।
4. ElasticEase:
   এটি একটি আরো নাটকীয় এবং স্টাইলিশ পরিবর্তন দেয়, যেখানে অ্যানিমেশনটি কিছুটা "বাউন্স" বা ঝাঁকুনি খায়। এই ধরনের easing function সাধারণত খুব নাটকীয় ট্রানজিশন তৈরি করতে ব্যবহৃত হয়।
5. BounceEase:
   BounceEase অ্যানিমেশন শেষ হওয়ার সময় "বাউন্স" ইফেক্ট তৈরি করে। এটি UI কন্ট্রোলের ওপর খুবই ইন্টারেস্টিং প্রভাব সৃষ্টি করে।
6. SinusoidalEase:
   এটি সাইনওয়েভ প্যাটার্নে অ্যানিমেশন তৈরি করে, যা খুবই স্লো এবং মসৃণ গতির পরিবর্তন দেয়।

Easing Function এর উদাহরণ (Example of Easing Function)

ধরা যাক, আপনি একটি বাটন আনিমেট করতে চান যাতে তার অবস্থান শুরুর দিকে ধীরে ধীরে পরিবর্তিত হয় এবং শেষে দ্রুত চলে আসে:

<Button Content="Click Me" Width="100" Height="50">
    <Button.RenderTransform>
        <TranslateTransform x:Name="ButtonTranslate"/>
    </Button.RenderTransform>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="ButtonTranslate"
                        Storyboard.TargetProperty="X"
                        From="0" To="300" Duration="0:0:3">
                        <DoubleAnimation.EasingFunction>
                            <BounceEase Bounces="3" Bounciness="2" />
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

এখানে, BounceEase easing function এর সাহায্যে বাটনের X অবস্থানকে ধীরে ধীরে পরিবর্তিত করা হচ্ছে, এবং শেষে বাউন্স ইফেক্ট প্রয়োগ করা হয়েছে।

Animation Control Techniques

WPF অ্যাপ্লিকেশনগুলিতে অ্যানিমেশন পরিচালনা করার জন্য কিছু বিশেষ Animation Control Techniques ব্যবহার করা হয়। এগুলি আপনাকে অ্যানিমেশনগুলি সূক্ষ্মভাবে নিয়ন্ত্রণ করতে সহায়তা করে এবং ইউজার ইন্টারফেসের অভিজ্ঞতাকে উন্নত করে।

1. KeyFrames

KeyFrames হল অ্যানিমেশনগুলির মধ্যে নির্দিষ্ট পয়েন্ট যা কোনো নির্দিষ্ট সময়ে অ্যানিমেশনের মান নির্ধারণ করে। KeyFrames-এর সাহায্যে আপনি অ্যানিমেশনটি সূচনা, মধ্যবর্তী এবং শেষের পয়েন্টে কিভাবে চলবে তা কাস্টমাইজ করতে পারেন।

KeyFrame উদাহরণ (Example of KeyFrames)

<Button Content="Click Me" Width="100" Height="50">
    <Button.RenderTransform>
        <TranslateTransform x:Name="ButtonTranslate"/>
    </Button.RenderTransform>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ButtonTranslate" Storyboard.TargetProperty="X" Duration="0:0:3">
                        <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                        <LinearDoubleKeyFrame Value="200" KeyTime="0:0:1"/>
                        <LinearDoubleKeyFrame Value="400" KeyTime="0:0:2"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

এখানে, LinearDoubleKeyFrame ব্যবহার করে বাটনের X অবস্থান 0 থেকে 200 এবং তারপর 400 পর্যন্ত পরিবর্তিত হবে।

2. RepeatBehavior এবং AutoReverseBehavior

• RepeatBehavior: এই টেকনিকের সাহায্যে আপনি একটি অ্যানিমেশন কতবার পুনরাবৃত্তি হবে তা নির্ধারণ করতে পারেন।
• AutoReverseBehavior: এই টেকনিকটি অ্যানিমেশনটি শেষ হলে তা স্বয়ংক্রিয়ভাবে উল্টো পথে চলে আসে।

RepeatBehavior এবং AutoReverseBehavior উদাহরণ

<Button Content="Click Me" Width="100" Height="50">
    <Button.RenderTransform>
        <TranslateTransform x:Name="ButtonTranslate"/>
    </Button.RenderTransform>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever" AutoReverse="True">
                    <DoubleAnimation
                        Storyboard.TargetName="ButtonTranslate"
                        Storyboard.TargetProperty="X"
                        From="0" To="200" Duration="0:0:2"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

এখানে, অ্যানিমেশনটি Forever পুনরাবৃত্তি হবে এবং AutoReverse দিয়ে এটি বাটনটির অবস্থান প্রথমে 0 থেকে 200 এবং তারপর আবার 0 তে ফিরে আসবে।

3. Storyboard Control

Storyboard WPF অ্যাপ্লিকেশনের অ্যানিমেশন কন্ট্রোল করার জন্য সবচেয়ে গুরুত্বপূর্ণ উপাদান। এটি একাধিক অ্যানিমেশন এবং KeyFrames সমন্বিত করতে পারে, এবং নির্দিষ্ট সময়ে এবং গতি অনুযায়ী অ্যানিমেশন চালায়।

Storyboard Control উদাহরণ

<Button Content="Click Me" Width="100" Height="50">
    <Button.RenderTransform>
        <TranslateTransform x:Name="ButtonTranslate"/>
    </Button.RenderTransform>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="ButtonTranslate"
                        Storyboard.TargetProperty="X"
                        From="0" To="300" Duration="0:0:2"/>
                    <ColorAnimation
                        Storyboard.TargetName="Button"
                        Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                        From="Red" To="Green" Duration="0:0:2"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

এখানে, একটি বাটন ক্লিক করলে দুটি অ্যানিমেশন একই সাথে কার্যকর হবে: একটিতে বাটনের X অবস্থান পরিবর্তিত হবে, অন্যটিতে ব্যাকগ্রাউন্ডের রঙ পরিবর্তিত হবে।

সারাংশ (Summary)

• Easing Functions অ্যানিমেশনগুলির গতি নিয়ন্ত্রণ করার জন্য ব্যবহৃত হয়, যা অ্যানিমেশনকে প্রাকৃতিক এবং স্লো-ফাস্ট গতির মধ্যে পরিবর্তিত করতে সহায়তা করে।
• Animation Control Techniques যেমন KeyFrames, RepeatBehavior, AutoReverse, এবং Storyboard অ্যানিমেশনকে আরও সূক্ষ্মভাবে নিয়ন্ত্রণ করার উপায় প্রদান করে, যা WPF অ্যাপ্লিকেশনে ইন্টারেকটিভ এবং মসৃণ অ্যানিমেশন তৈরি করতে সাহায্য করে।